// ========================================================
// button 按钮UI生成器
// ========================================================
@mixin button-style($name, $bg-color, $border-color, $active-bg-color, $active-border-color, $color) {
    &.button-#{""+$name} {
        color: $color;
        border-color: $border-color;
        background-color: $bg-color;

        &.active,
        &.actived {
            border-color: $active-border-color;
            background-color: $active-bg-color;
            box-shadow: inset 0 1px 4px rgba(0,0,0,0.1);
        }

        &.button-clear {
            color: $border-color !important;
        }

        &.button-link {
            color: $border-color !important;

            &.active {
                color: rgba($border-color, $button-active-opacity) !important;
            }
        }
    }
}
@mixin button($styles: stable positive energized assertive) {
    font-size: rem($button-font-size);
    line-height: rem($button-height - $button-border-width * 2);

    position: relative;

    display: inline-block;

    min-height: rem($button-height);
    padding: 0 rem($button-padding);

    cursor: pointer;
    text-align: center;
    vertical-align: bottom;

    white-space: nowrap;
    text-decoration: none;

    -webkit-user-drag: none;
    user-select: none;

    color: $button-default-text;
    border: $button-border-width solid $button-default-border;
    border-radius: rem($button-border-radius);
    background-color: $button-default-bg;

    &.active,
    &.activated {
        border-color: $button-default-active-border;
        background-color: $button-default-active-bg;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15);
    }

    // 添加一个隐藏的区域，增大按钮的点击面积
    &:after {
        position: absolute;
        top: rem(-($button-padding / 2));
        right: rem(-($button-padding / 2));
        bottom: rem(-($button-padding / 2));
        left: rem(-($button-padding / 2));

        content: ' ';
    }

    &:before {
        font-size: rem($button-icon-size);
        margin-right: $button-icon-padding;
        float: left;
        display: inline-block;
        line-height: rem($button-height - $button-border-width * 2) !important;
    }
    

    &.icon-right:before {
        margin-left: $button-icon-padding;
        margin-right: 0;
        float: right;
    }

    @each $style in $styles {
        @if $style == stable {
            @include button-style($style, $button-stable-bg, $button-stable-border,
            $button-stable-active-bg, $button-stable-active-border, $button-stable-text);
        }
        @if $style == positive {
            @include button-style($style, $button-positive-bg, $button-positive-border,
            $button-positive-active-bg, $button-positive-active-border, $button-positive-text);
        }
        @if $style == energized {
            @include button-style($style, $button-energized-bg, $button-energized-border,
            $button-energized-active-bg, $button-energized-active-border, $button-energized-text);
        }
        @if $style == assertive {
            @include button-style($style, $button-assertive-bg, $button-assertive-border,
            $button-assertive-active-bg, $button-assertive-active-border, $button-assertive-text);
        }
    }
    
    @at-root {
        .button-block {
            display: block;

            width: 100%;
            min-height: rem($button-block-height);
            line-height: rem($button-block-height - $button-border-width * 2);
            margin-bottom: rem($margin-base);
        }

        .button-small {
            font-size: rem($button-small-font-size);
            line-height: rem($button-small-height - $button-border-width * 2);

            min-width: rem($button-small-height);
            min-height: rem($button-small-height);
            padding: rem(2px) rem($button-small-padding);

            &:before {
                font-size: rem($button-small-font-size);
                line-height: rem($button-small-height - $button-border-width * 2) !important;
            }
        }

        .button-large {
            font-size: rem($button-large-font-size);
            line-height: rem($button-large-height - $button-border-width * 2);

            min-width: rem(($button-large-padding * 3) + $button-large-font-size);
            min-height: rem($button-large-height + 5);
            padding: 0 rem($button-large-padding);

            &.icon-right:before {
                font-size: rem($button-large-font-size);
                line-height: rem($button-large-height - $button-border-width * 2);
            }
        }

        .button.disabled,
        .button[disabled] {
            @include disabled($button-disable-opacity);
        }

        .button-clear, .button-link {
            padding: 0 rem($button-clear-padding);

            color: $button-default-text;
            border-width: 0;
            background: none !important;
            box-shadow: none !important;

            transition: opacity .1s;

            &.active,
            &.activated {
                opacity: $button-clear-active;
            }
        }

        .button-link {
            color: $button-link-text;
            font-size: inherit;
            padding: 0;
            min-height: auto;
            line-height: inherit;
        }
    }
}
